<template>
	<view class="hexiaotongdao">
		<headertop title="核销通道" :back1="back1"></headertop>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11456@2x.png" mode=""
			class="hexiaotongdao_backimg"></image>
		<view class="numboxs">
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11455@2x.png" class="numboxs_backimg"
				mode=""></image>
			<view class="numssbox">
				<view class="box">
					<view class="t1">
						{{hexiaoobj.amount}}
					</view>
					<view class="t2">
						订单金额
					</view>
				</view>
				<view class="boderline">

				</view>
				<view class="box">
					<view class="t1">
						{{hexiaoobj.ordernum}}
					</view>
					<view class="t2">
						订单数量
					</view>
				</view>
			</view>
			<view class="btnssbox">
				<view class="btn" @click="saoma">
					<image src="/static/Frame@2x(4).png" class="icon" mode=""></image>
					<view class="title">
						扫一扫核销
					</view>
				</view>
				<view class="btn" @click="show=true">
					<image src="/static/Frame@2x(5).png" class="icon" mode=""></image>
					<view class="title">
						核销码核销
					</view>
				</view>
			</view>

		</view>
		<view class="bottombox">
			<view class="classifys">
				<view :class="query.status==0?'item activecolor':'item'" @click="qiehuan(0)">
					全部订单
					<view class="activebox" v-if="query.status==0">

					</view>
				</view>
				<view :class="query.status==1?'item activecolor':'item'" @click="qiehuan(1)">
					待核销
					<view class="activebox" v-if="query.status==1">

					</view>
				</view>
				<view :class="query.status==2?'item activecolor':'item'" @click="qiehuan(2)">
					使用中
					<view class="activebox" v-if="query.status==2">

					</view>
				</view>
				<view :class="query.status==3?'item activecolor':'item'" @click="qiehuan(3)">
					待退还
					<view class="activebox" v-if="query.status==3">

					</view>
				</view>
				<view :class="query.status==4?'item activecolor':'item'" @click="qiehuan(4)">
					已完成
					<view class="activebox" v-if="query.status==4">

					</view>
				</view>
			</view>
		</view>
		<view class="msgicon" v-if="!list.length">
			<image src="/static/微信图片_20250514232056.png" mode="widthFix"></image>
			<view class="msgtext">
				暂无记录
			</view>
		</view>
		<view class="orderinfo" v-for="(item,index) in list" @click="gopage(item)" :key="index">
			<view class="center" v-if="item.file">
				<view class="toplinebox">
					<view class="dingdanbianh">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250429143332.png"
							mode=""></image>
						<span>订单编号：{{item.file.order_no}}</span>
					</view>
					<view class="checkbox aa" :style="{'color':funcolor(item),'background':funcolor1(item)}">
						{{statustext(item.status)}}
					</view>
				</view>
				<view class="infoline" v-if="item.type==3" v-for="ite in item.goods" :key="ite.id">
					<image :src="ite.image" class="leftimg" mode=""></image>
					<view class="texts">
						<view class="t1">
							<view class="gubox" v-if="ite.typename=='固'">
								固
							</view>
							<span>{{ite.cname}}</span>
						</view>
						<view class="t2">
							{{ite.detail}}
						</view>
					</view>
				</view>
				<view class="infoline" v-if="item.type==2||item.type==4||item.type==1" v-for="ite in item.goods"
					:key="ite.id">
					<image :src="ite.image" class="leftimg" mode=""></image>
					<view class="texts">
						<view class="t1">

							<span>{{ite.title}}</span>
						</view>
						<view class="t2">
							{{ite.detail}}
						</view>
					</view>
				</view>


				<view class="yuyueinfo" v-if="item.type==3&&item.file">
					<view class="texts1">
						<span>预约人：{{item.file.username}}</span>
						<span style="margin-left: 116rpx;">预约人数：{{item.file.usernum}}</span>
					</view>
					<view class="texts1">
						<span>预约电话：{{item.file.telphone}}</span>
					</view>
					<view class="texts1" style="margin-bottom: 28rpx;">
						<span>预约时间：{{item.file.datetime}} （{{item.file.starttime}}-{{item.file.endtime}}）</span>
					</view>
					<view class="" v-if="item.status==2"
						style="width: 100%;height: 112rpx;display: flex;align-items: center;margin-top: 24rpx;border-top: 1rpx solid #F2F3F5;">
						<view @click.stop="tuikuanxianshi(item)"
							style="width: 190rpx;heigh: 64rpx;background: #7EBC79;border-radius: 8rpx 8rpx 8rpx 8rpx;text-align: center;line-height: 64rpx;margin-left: 440rpx;font-size: 28rpx;color: #FFFFFF;">
							退款
						</view>
					</view>
				</view>




				<view class="yuyueinfo" v-if="item.type!=3&&item.file">
					<view class="texts1">
						<span style="width: 236rpx;">联系人：{{item.file.username}}</span>
						<span style="margin-left: 30rpx;">联系电话：{{item.file.telphone}}</span>
					</view>
					<view class="" v-if="item.status==2&&item.type!=3&&item.file"
						style="width: 100%;height: 112rpx;display: flex;align-items: center;margin-top: 24rpx;border-top: 1rpx solid #F2F3F5;">
						<view @click.stop="tuikuanxianshi(item)"
							style="width: 190rpx;heigh: 64rpx;background: #7EBC79;border-radius: 8rpx 8rpx 8rpx 8rpx;text-align: center;line-height: 64rpx;margin-left: 440rpx;font-size: 28rpx;color: #FFFFFF;">
							退款
						</view>
					</view>
					<view class="" style="height: 28rpx;" v-else>

					</view>
				</view>

			</view>
		</view>
		<up-popup :show="show" mode="center">
			<view class="popucenter" style="height: 400rpx;">
				<image src="/static/Frame@2x(6).png" class="close" @click="show=false" mode="">
				</image>
				<view class="title">
					请输入核销码核销
				</view>
				<view class="inputbox">
					<input type="text" v-model="hexiaoma" placeholder="请输入核销码" />
				</view>
				<view class="btnss">
					<view class="btn1" @click="show=false">
						取消
					</view>
					<view class="btn2" @click="queren()">
						确认
					</view>
				</view>
			</view>
		</up-popup>

		<up-popup :show="show1" mode="center">
			<view class="popucenter">
				<image src="/static/Frame@2x(6).png" class="close" @click="show1=false" mode="">
				</image>
				<view class="title">
					请输入退款金额
				</view>
				<view class="inputbox">
					<input type="digit" v-model="money" placeholder="￥ 请输入退款金额" />
				</view>
				<view class="inputbox">
					<input type="text" v-model="memo" placeholder="请输入备注" />
				</view>
				<view class="btnss">
					<view class="btn1" @click="show1=false">
						取消
					</view>
					<view class="btn2" @click="qd">
						确认
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		orderlist,
		saohexiao,
		tuiya
	} from '@/api/my.js'
	import {
		ref,
		reactive
	} from 'vue'
	const lastpage = ref(0)
	const list = ref([])
	const show = ref(false)
	const itemobj = ref({})
	const show1 = ref(false)
	const back1 = ref('')
	const hexiaoobj = ref({})
	const hexiaoma = ref('')
	const money = ref('')
	const memo = ref('')
	const query = reactive({
		page: 1,
		limit: 10,
		keywords: '',
		status: 0
	})

	function gopage(item) {
		uni.navigateTo({
			url: '/sub_my/my/hexiaodetail?id=' + item.id
		})
	}
	async function qd() {
		if (!money.value) {
			uni.showToast({
				title: '请输入金额',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要退款吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					qd1()
					// 执行确定后的逻辑
				} else if (res.cancel) {
					console.log('用户点击了取消');
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {
				console.error('弹窗调用失败', err);
			}
		});

	}
	async function qd1() {
		const res = await tuiya({
			id: itemobj.value.id,
			money: money.value,
			type: itemobj.value.type,
			memo: memo.value
		})
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			return
		}

		if (res.data.code == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
			}, 500)
			query.page = 1
			list.value = []
			init()
			money.value = ''
			memo.value = ''
			show1.value = false
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}

	function tuikuanxianshi(item) {
		itemobj.value = item
		money.value = item.file.deposit
		show1.value = true

	}
	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeeeee');
		if (e.scrollTop > 100) {
			back1.value = '#84BD78'
		} else {
			back1.value = ''
		}
		if (lastpage.value > query.page) {
			query.page++
			init()
		}
	})
	onShow(() => {
		query.status = 0
		query.page = 1
		list.value = []
		init()
		hexiaoma.value = ''
	})

	function qiehuan(num) {
		if (query.status == num) return
		query.status = num
		query.page = 1
		list.value = []
		init()
		// console.log(list.value);
	}
	async function init(str) {
		if (str == '搜索') {
			query.page = 1
			list.value = []
		}
		const res = await orderlist(query)
		if (res.data.code == 1) {
			list.value.push(...res.data.data.list)
			hexiaoobj.value = res.data.data
			console.log(list.value, 'list.valuelist.valuelist.valuelist.value');
			lastpage.value = res.data.data.lastpage

		}
	}

	function saoma() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				hexiaoxinxi(res.result)
			}
		});

	}

	function funcolor(item) {
		var num = item.status
		if (num == 0) {
			return '#FF7D00'
		} else if (num == 1) {
			return '#00B42A'
		} else if (num == 2) {
			return '#165DFF'
		} else {
			return '#47533D'
		}
	}

	function funcolor1(item) {
		var num = item.status
		if (num == 0) {
			return '#FFF7E8'
		} else if (num == 1) {
			return '#E8FFEA'
		} else if (num == 2) {
			return '#E8F3FF'
		} else {
			return 'rgba(71,83,61,0.1);'
		}
	}

	function queren() {
		if (!hexiaoma.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入核销码',
			})
		} else {
			hexiaoxinxi(hexiaoma.value)
			show.value = false
		}

	}
	async function hexiaoxinxi(hxmao) {
		const res = await saohexiao({
			hxmao
		})

		if (res.code == 0) {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
			return
		}
		if (res.data.code == 1) {
			uni.setStorageSync('hexiaoobj', res.data.data)
			uni.navigateTo({
				url: '/sub_my/my/hexiao'
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}

	function statustext(num) {
		if (num == 0) {
			return '待核销'
		} else if (num == 1) {
			return '使用中'
		} else if (num == 2) {
			return '待退还'
		} else if (num == 3) {
			return '可退押金'
		} else if (num == 4) {
			return '退款进行中'
		} else if (num == 5) {
			return '审核中'
		} else {
			return '已完成'
		}
	}
</script>
<style lang="scss">
	.msgicon {
		width: 532rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 532rpx;
		}
	}

	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	.popucenter {
		width: 592rpx;
		height: 490rpx;
		background: linear-gradient(180deg, #F4FFF5 0%, #FFFFFF 31%);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		overflow: hidden;
		position: relative;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 0%;
			right: 0%;
			margin-right: 24rpx;
			margin-top: 24rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
			text-align: center;
			margin-top: 48rpx;
			width: 100%;
			margin-bottom: 50rpx;
		}

		.btnss {
			width: 520rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;

			.btn1 {
				width: 240rpx;
				height: 64rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #7EBC79;
				text-align: center;
				line-height: 64rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #7EBC79;
			}

			.btn2 {
				width: 240rpx;
				height: 64rpx;
				background: #7EBC79;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 64rpx;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}

		.inputbox {
			width: 520rpx;
			height: 84rpx;
			margin: auto;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			input {
				margin-left: 30rpx;
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	.activecolor {
		color: #4F8D41 !important;
	}

	.hexiaotongdao {
		width: 100%;
		overflow: hidden;
		position: relative;

		.orderinfo {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 28rpx;
			overflow: hidden;

			.center {
				width: 630rpx;
				margin: auto;

				.yuyueinfo {
					width: 100%;
					overflow: hidden;
					margin-top: 28rpx;
					border-top: 2rpx solid #F2F3F5;

					.texts1 {
						width: 100%;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						display: flex;
						white-space: nowrap;
						margin-top: 24rpx;
					}
				}

				.infoline {
					width: 100%;
					display: flex;
					margin-top: 28rpx;

					.leftimg {
						width: 166rpx;
						height: 148rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.texts {
						width: 358rpx;
						margin-left: 16rpx;

						.t2 {
							width: 358rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 隐藏溢出内容 */
							text-overflow: ellipsis;
							margin-top: 28rpx;
							/* 超出用省略号表示 */
						}

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #1D2129;
							display: flex;
							align-items: center;

							.gubox {
								width: 48rpx;
								height: 32rpx;
								background: #7EBC79;
								border-radius: 4rpx 16rpx 4rpx 16rpx;
								line-height: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								margin-right: 8rpx;
							}
						}
					}
				}

				.toplinebox {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 24rpx;

					.dingdanbianh {
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
						display: flex;
						align-items: center;
						width: 68%;
						word-break: break-all;

						image {
							height: 28rpx;
							margin-right: 12rpx;
							width: 24.03rpx;
						}
					}

					.checkbox {
						height: 40rpx;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
						padding: 0 10rpx;
					}

					.aa {
						background: #FFF7E8;
						color: #FF7D00;
					}

					.bb {
						background: #E8FFEA;
						color: #00B42A;
					}

					.cc {
						background: #E8F3FF;
						color: #165DFF;
					}

					.dd {
						background: rgba(71, 83, 61, 0.1);
						color: #47533D;
					}
				}
			}
		}

		&_backimg {
			width: 100%;
			height: 660rpx;
			position: absolute;
			z-index: -1;
		}

		.boderline {
			width: 2rpx;
			height: 146rpx;
			background: #84BD78;
			margin-top: 24rpx;
		}

		.itemboxss {
			width: 686rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 28rpx;

			.itembox1 {
				width: 100%;
				height: 450rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
			}
		}

		.bottombox {
			width: 100%;
			overflow: hidden;
			margin-top: 56rpx;
			background: #F7F8FA;
			box-shadow: 0rpx -4rpx 8rpx 0rpx #63AC54;
			border-radius: 48rpx 48rpx 0rpx 0rpx;

			.classifys .item:last-child {
				margin-right: 0rpx !important;
			}

			.classifys .item:first-child {
				margin-left: 20rpx !important;
			}

			.classifys {
				width: 686rpx;
				height: 70rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.13);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin: auto;
				display: flex;
				align-items: center;
				margin-top: 28rpx;

				.item {
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 48rpx;
					position: relative;

					.activebox {
						position: absolute;
						bottom: -38%;
						width: 96rpx;
						height: 6rpx;
						background: #4F8D41;
						border-radius: 3rpx 3rpx 0rpx 0rpx;

					}
				}
			}

		}

		.numboxs {
			width: 686rpx;
			height: 322rpx;
			position: relative;
			margin: auto;
			margin-top: 190rpx;
			overflow: hidden;

			&_backimg {
				width: 686rpx;
				height: 322rpx;
				position: absolute;
				z-index: -1;
			}


			.btnssbox {
				width: 626rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.btn {
					width: 296rpx;
					height: 102rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					display: flex;
					align-items: center;
					background: #4F8D41;

					.icon {
						width: 60rpx;
						height: 60rpx;
						margin-left: 28rpx;
					}

					.title {
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						margin-left: 20rpx;
					}
				}
			}

			.numssbox {
				width: 100%;
				display: flex;
				align-items: center;

				.box {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 48rpx;
						color: #1D2129;
						margin-top: 42rpx;
					}

					.t2 {
						font-weight: 500;
						font-size: 28rpx;
						color: #4E5969;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>